<!-- 参考：https://gitee.com/xushengguo/uni-def/tree/master/common -->

<!-- pointer-events: none 解决popover弹层无法被点击 -->

<!-- 
<p-popover>
	<button >上</button>
	<template #bubble>
		<view style="width: 680rpx;height: 200rpx;">气泡弹窗</view>
	</template>
</p-popover>
 -->

<template>
	<view class="bubble">
		<view class="" @click="open">
			<slot></slot>
		</view>
		<view class="absolute z-999" :class="className_wrap" v-if="show">
			<view class="w-full h-full" :class="className_box">
				<view :class="className_content">
					<slot name="bubble"></slot>
					<!-- <view style="width: 680rpx;height: 200rpx;">ddddddd</view> -->
				</view>
			</view>
		</view>
		<view class="bubble-pop-fixed" v-if="show && mask" @touchmove="close" @click="close"> </view>
	</view>
</template>

<script>
export default {
	name: 'p-popover',
	emits: ['change', 'open', 'close'],
	props: {
		// rightBottom leftBottom
		mode: {
			type: String,
			default: 'top',
		},
		mask: {
			type: Boolean,
			default: true,
		},
	},
	watch: {
		isShow: {
			handler(val) {
				if (val) {
					this.timer_1 && clearTimeout(this.timer_1);
					this.show = val;
				} else {
					this.timer_1 = setTimeout(() => {
						this.show = false;
					}, 300);
				}
			},
		},
	},
	computed: {
		className_wrap() {
			const { mode } = this;
			let str = 'bubble-pop';
			if (mode) str += `_${mode}`;
			return str;
		},
		className_box() {
			const { mode, isShow } = this,
				list = [];
			if (mode) list.push(`bubble-pop-box_${mode}`);
			else list.push(`bubble-pop-box`);

			if (mode !== 'top') {
				if (isShow) list.push(`s_in`);
				else list.push(`s_out`);
			} else {
				if (isShow) list.push(`slide-in-fwd-bottom`);
				else list.push(`slide-out-bck-bottom`);
			}

			return list.join(' ');
		},
		className_content() {
			const { mode, isShow } = this,
				list = [];
			if (isShow) list.push(`slide-in-blurred-bottom`);
			return list.join(' ');
		},
	},
	data() {
		return {
			isShow: false,
			show: false,
		};
	},
	methods: {
		close() {
			this.$emit('close');
			this.isShow = false;
			this.$emit('change', {
				show: false,
				// type: this.type,
			});
		},
		open() {
			this.$emit('open');
			this.isShow = true;
			this.$emit('change', {
				show: true,
				// type: direction,
			});
		},
	},
};
</script>

<style scoped>
.bubble {
	position: relative;
}

.bubble-pop_top,
.bubble-pop_bottom,
.bubble-pop_right,
.bubble-pop_left {
	z-index: 11;
	perspective: 800rpx;
}

.bubble-pop_top {
	top: -20rpx;
	left: 50%;
	transform: translateY(-100%) translateX(-50%);
}

.bubble-pop_bottom {
	bottom: -20rpx;
	left: 50%;
	transform: translateY(100%) translateX(-50%);
}

.bubble-pop_right {
	left: calc(100% + 20rpx);
	top: 50%;
	transform: translateY(-50%);
}

.bubble-pop_left {
	right: calc(100% + 20rpx);
	top: 50%;
	transform: translateY(-50%);
}

.bubble-pop_leftBottom {
	bottom: -20rpx;
	transform: translateY(100%) translateX(-50%);
}

.bubble-pop-box_top,
.bubble-pop-box_bottom,
.bubble-pop-box_right,
.bubble-pop-box_left {
	/* min-width: 200rpx; */
	/* min-height: 100rpx; */
	border-radius: 10rpx;
	background-color: #fff;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.bubble-pop-box_top::after,
.bubble-pop-box_bottom::after,
.bubble-pop-box_right::after,
.bubble-pop-box_left::after {
	content: ' ';
	width: 0;
	height: 0;
	border: 10rpx solid transparent;
	display: block;
	position: absolute;
}

.bubble-pop-box_top::after {
	border-bottom: none;
	border-top-color: #ffffff;
	bottom: 0rpx;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
}

.bubble-pop-box_bottom::after {
	border-top: none;
	border-bottom-color: #ffffff;
	top: 0rpx;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
}

.bubble-pop-box_right::after {
	border-left: none;
	border-right-color: #ffffff;
	left: 0rpx;
	top: 50%;
	transform: translateX(-100%) translateY(-50%);
}

.bubble-pop-box_left::after {
	border-right: none;
	border-left-color: #ffffff;
	right: 0rpx;
	top: 50%;
	transform: translateX(100%) translateY(-50%);
}

.bubble-pop-fixed {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
}

.slide-in-fwd-bottom {
	animation: slide-in-fwd-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-fwd-bottom {
	0% {
		transform: translateZ(-1100px) translateY(100%);
		opacity: 0;
	}

	100% {
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}
}

.slide-in-blurred-bottom {
	animation: slide-in-blurred-bottom 0s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slide-in-blurred-bottom {
	0% {
		transform: translateY(500%) scaleY(2.5) scaleX(0.2);
		transform-origin: 50% 100%;
		filter: blur(40px);
		opacity: 0;
	}

	100% {
		transform: translateY(0) scaleY(1) scaleX(1);
		transform-origin: 50% 50%;
		filter: blur(0);
		opacity: 1;
	}
}

.slide-out-bck-bottom {
	animation: slide-out-bck-bottom 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes slide-out-bck-bottom {
	0% {
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}

	100% {
		transform: translateZ(-1100px) translateY(100%);
		opacity: 0;
	}
}

.s_in {
	animation: s_in 0.3s ease-in both;
}

@keyframes s_in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.s_out {
	animation: s_out 0.3s ease-out both;
}

@keyframes s_out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
</style>
